<h3>Events</h3>

All w2ui controls have the same event flow. There are two ways you can add/remove events:
<ol>
    <li>using on"Event" properties </li>
    <li>using <span class="method">.on()</span> and <span class="method">.off()</span> methods</li>
</ol>
The first way is simple, can only be done during object creation and it limits you to a single event listener per event. The second way
lets you add multiple event listeners, but can only be called at run-time. It gives you a better control of the event flow.
Every widget property that start with "on" is an event.

<h3>Properties and Methods</h3>

<div class="obj-property">
    <a href="../common.on">on</a> <span>- function (type, handler)</span>
</div>
<div class="obj-property-desc">
    Adds event listener to the w2ui object.
</div>
<div class="obj-property">
    <a href="../common.off">off</a> <span>- function (type, [handler])</span>
</div>
<div class="obj-property-desc">
    Removes event listener to the w2ui object.
</div>
<div class="obj-property">
    <a href="../common.trigger">trigger</a> <span>- function (eventData)</span>
</div>
<div class="obj-property-desc">
    Executes all event listeners added with <span class="method">.on()</span> method.
</div>
<div class="obj-property">
    <a href="../common.handlers">handlers</a> <span>- array of objects </span>
</div>
<div class="obj-property-desc">
    Array of event handlers.
</div>

<h3>Event Handler Function</h3>

When an event is emitted the handler function will receive one argument: <span class="argument">event</span>.
This argumnet is an object that contains useful information about the event. It has methods that allow you to
control the event flow, stop propagation, cancel or execute a function after default processing.
<div style="height: 10px"></div>

Event handler looks like:
<textarea class="javascript">
function (event) {
    // event actions
    console.log(event.detail)
}
</textarea>

By default all event handlers are triggered before any action is applied by the widget itself, hence, you can easily
cancel event default action by:
<textarea class="javascript">
function (event) {
    event.preventDefault(); // cancel event
}
</textarea>

You can also define a function that will be executed after the default action is processed is processed. For example:
<textarea class="javascript">
function (event) {
    event.done(function () {
        // you can define multiple "done" functions and all will be executed.
    });
}
// since v 2.0 you can do it in asyc way
async function (event) {
    await event.complete
    // after widget defaults
}
</textarea>